<template>
    <div class="check-game-com" v-loading="loading">
        <b>关键字：</b>
        <el-input
            placeholder="请输入您要搜索的内容"
            @keyup.enter.native="getList(1)"
            style="width:200px;"
            clearable
            v-model.trim="keyword">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <b style="margin-left:10px">包类型：</b>
        <el-select
            v-model="pkgType"
            style="width:100px;"
            @change="getList(1)">
            <el-option label="全部" :value="-1"></el-option>
            <el-option label="主包" :value="0"></el-option>
            <el-option label="分包" :value="1"></el-option>
            <el-option label="雷同包" :value="2"></el-option>
        </el-select>
        <el-button type="primary" @click="getList(1)" style="margin-left:20px;">查询</el-button>

        <el-table
            class="table-box"
            ref="multipleTable"
            :data="gameList"
            tooltip-effect="dark"
            style="width: 100%"
            max-height="520">
            <el-table-column
                width="80"
                prop="gameid"
                label="id">
            </el-table-column>
            <el-table-column
                width="80"
                prop="appIcon"
                label="游戏信息">
                <template slot-scope="scope">
                    <div class="img-box">
                        <img :src="scope.row.appIcon" alt="">
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                label="包名">
                <template slot-scope="scope">
                    <span>{{scope.row.appPackage || '-'}}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="游戏名称">
                <template slot-scope="scope">
                    <div>{{scope.row.appName || '-'}}</div>
                </template>
            </el-table-column>
            <el-table-column
                width="95"
                label="游戏评分">
                <template slot-scope="scope">
                    <div>{{scope.row.appScore || '-'}}</div>
                </template>
            </el-table-column>
            <el-table-column
                width="180"
                label="游戏副标题">
                <template slot-scope="scope">
                    <div>{{scope.row.appTitle || '-'}}</div>
                </template>
            </el-table-column>
            <el-table-column
                label="游戏类型">
                <template slot-scope="scope">
                    <div>{{scope.row.appCategoryName || '-'}}</div>
                </template>
            </el-table-column>
            <el-table-column
                prop="source"
                label="游戏来源">
                <template slot-scope="scope">
                    <span v-if="scope.row.source === 0">taptap</span>
                    <span v-else-if="scope.row.source === 1">应用宝</span>
                    <span v-else-if="scope.row.source === 2">客户</span>
                    <span v-else-if="scope.row.source === 3">学习识别</span>
                    <span v-else-if="scope.row.source === 4">人工</span>
                    <span v-else-if="scope.row.source === 5">小米</span>
                    <span v-else>-</span>
                </template>
            </el-table-column>
            <el-table-column
                label="游戏状态">
                    <template slot-scope="scope">
                        <div v-if="scope.row.status === 1" style="color: #67C23A;">可下载</div>
                        <div v-else-if="scope.row.status === 0" style="color:#909399;">不可下载</div>
                        <div v-else-if="scope.row.status === -1" style="color:#F56C6C;">下架</div>
                        <div v-else>-</div>
                    </template>
            </el-table-column>
            <el-table-column
                label="包类型">
                    <template slot-scope="scope">
                        <div v-if="scope.row.leader === 0">主应用</div>
                        <div v-else-if="scope.row.leader === 1">
                            <div class="img-box" v-if="scope.row.leaderIcon">
                                <img :src="scope.row.leaderIcon" alt="">
                            </div>
                            <div class="leader-btn">{{scope.row.leaderName || '-'}}</div>
                        </div>
                        <div v-else style="color: #F56C6C;">未知</div>
                    </template>
            </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作">
                    <template slot-scope="scope">
                        <div v-if="scope.row._disabledCheck">已关联</div>
                        <div v-else><el-button @click="selectGame(scope.row)" type="text" size="small">添加至分身</el-button></div>
                        <div><el-button @click="goGameDetailBlank(scope.row.gameid)" type="text" size="small">查看详情</el-button></div>
                    </template>
                </el-table-column>
        </el-table>

        <div class="tools">
            <el-pagination
                @size-change="sizeChange"
                @current-change="pageChange"
                :current-page="pageNum"
                :page-sizes="_pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    name: 'checkGame',
    data () {
        return {
            keyword: '',
            pkgType: -1,
            gameList: [],
            pageNum: 1,
            pageSize: 10,
            total: 0,
            checkList: [],
            loading: false,
            disabledId: []
        }
    },

    props: ['disabledList', 'gameName'],

    created () {
        this.keyword = this.gameName
        this.disabledList.forEach(item => {
            if (item.gameid) {
                this.disabledId.push(item.gameid)
            } else {
                this.disabledId.push(item.gameId)
            }
        })
        this.getList(1)
    },

    methods: {
        // 获取游戏列表
        async getList (pageNum) {
            if (this.loading) return
            this.pageNum = pageNum
            this.loading = true
            let params = {
                pageIndex: pageNum,
                pageNum: this.pageSize
            }
            if (this.keyword) {
                params.keyword = this.keyword
            }
            params.pkgType = this.pkgType >= 0 ? this.pkgType : null
            let res = await this.$http.post('/game/findGames', params)
            if (res.code === '0') {
                res.data.forEach(item => {
                    if (this.disabledId.includes(item.gameid)) {
                        item._disabledCheck = true
                    } else {
                        item._disabledCheck = false
                    }
                })
                this.gameList = res.data
                this.total = res.count
            } else {
                this.$message({
                    type: 'error',
                    message: '系统异常，请稍后再试'
                })
            }
            this.loading = false
        },

        // 选中游戏
        selectGame (item) {
            this.$emit('updateGame', item)
        },

        sizeChange (val) {
            this.pageSize = val
            this.getList(1)
        },
        pageChange (val) {
            this.pageNum = val
            this.getList(this.pageNum)
        },

        goGameDetailBlank (id) {
            const { href } = this.$router.resolve({
                path: '/game/gameDetail',
                query: {
                    id
                }
            })
            window.open(href, '_blank')
        }
    }
}
</script>

<style lang="scss" scoped>
    .check-game-com {
        .table-box {
            margin-top: 20px;
            .img-box {
                width: 60px;
                height: 60px;
                > img {
                    height: 100%;
                    width: 100%
                }
            }
        }
        .btn-box {
            padding-right: 20px;
            margin-top: 20px;
            display: flex;
            justify-content: flex-end;
            .check-btn {
                margin-left: 50px;
            }
        }

        .tools {
            margin-top: 10px;
            padding-right: 20px;
            display: flex;
            justify-content: flex-end;
        }
    }
</style>
